<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }
        li {
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }
        img {
            width: 80%;
        }
    </style>
</head>
<body>

    <ul>
        <!-- <li>
            <a href="">
                <img src="" alt="">
                <h3>标题</h3>
                <p>描述</p>
                <span>价格</span>
            </a>
        </li> -->

    </ul>


    <script src="../js/ajax.js"></script>

    <script>
        ajax({
            url : 'http://43.138.81.225/php/list.php' ,
            type : 'get' ,
            success : data => {
                console.log(data);
                if(data.status) {
                    const list = data.data ;
                    // 数据请求成功以后，渲染页面
                    render(list)

                } else {
                    alert('服务器错误')
                }
                
            }
        })


        function render(list) {
            let html = '' ;
            // list.forEach((item) => {   // 此处可以把item解构
            //     html += `
            //         <li>
            //             <a href="">
            //                 <img src="${item.goods_img}" alt="">
            //                 <h3>标题</h3>
            //                 <p>描述</p>
            //                 <span>价格</span>
            //             </a>
            //         </li>
            //     `
            // })

            list.forEach(({goods_img , goods_title , goods_price , goods_des , goods_id}) => {
                html += `
                    <li>
                        <a href="./detail.html?id=${goods_id}">
                            <img src="${goods_img}" alt="">
                            <h3>${goods_title}</h3>
                            <p>${goods_des}</p>
                            <span>${goods_price}</span>
                        </a>
                    </li>
                `
            })

            const oUl = document.querySelector('ul') ;
            oUl.innerHTML = html ;
        }


    </script>
    
</body>
</html>